<template>
	<div class="card-title">
		<div class="icon">
			<img src="../../assets/images/home/title-icon.png" class="image" alt="" />
		</div>
		<div class="title">
			<div class="text">{{ title }}</div>
			<slot></slot>
			<div class="before">
				<img src="../../assets/images/home/title-before.png" class="image" alt="" />
			</div>
		</div>
	</div>
</template>

<script setup>
const props = defineProps(["title"]);
</script>

<style scoped lang="scss">
@import "../../assets/css/common.scss";
.card-title {
	display: flex;
	align-items: center;
    width:100%;
	.icon {
		width: 20px;
		height: 20px;
		margin-right: 10px;
		.image {
			width: 20px;
			height: 20px;
		}
	}
	.title {
        width:100%;
		position: relative;
        border-bottom: 1px solid $main-color;
		display:flex;
		align-items: center;
		.text {
			padding: 10px 0;
            font-size:20px;
            font-weight:500;
		}
		.before {
			position: absolute;
			width: 33px;
			height: 4px;
			left: 0;
			bottom: 7px;
			.image {
				width: 100%;
				height: 100%;
			}
		}
	}
}
</style>
